<template>
    <view class="chart-panel">
        <view v-if="showChart && chartData.series[0].data.length > 0" class="chart-panel-content">
            <qiun-data-charts ref="chartRef" type="area" :opts="opts" :chartData="chartData"
                :inScrollView="inScrollView" :pageScrollTop="pageScrollTop" style="width: 100%;"
                tooltipFormat="tooltipDemo1" :animation="false" :canvas2d="true" />
        </view>
        <view v-else class="chart-panel-empty">
            <up-empty mode="data" iconSize="40"></up-empty>
        </view>
    </view>


</template>

<script setup>
import { computed, watch, ref } from 'vue'

const props = defineProps({
    chartData: { type: Array, required: true },
    categories: { type: Array, required: true },
    splitNumber: { type: Number, default: 7 },
    height: { type: String, default: '400rpx' },
    inScrollView: { type: Boolean, default: true },
    pageScrollTop: { type: Number, default: 0 }
})
const showChart = ref(false)

watch(() => props.chartData, (newVal) => {
    console.log(newVal, "newVal")
    showChart.value = newVal?.length > 0
}, {
    deep: true,
    immediate: true
})

const chartData = computed(() => ({
    categories: Array.isArray(props.categories) ? [...props.categories] : [],
    series: [
        {
            name: "",
            data: Array.isArray(props.chartData) ? [...props.chartData] : []
        }
    ]
}))

const opts = computed(() => {
    const arr = Array.isArray(props.chartData) ? [...props.chartData] : []
    const categories = Array.isArray(props.categories) ? [...props.categories] : []

    if (arr.length == 1) {
        return {
            color: ["#6DDACE"],
            padding: [15, 15, 0, 15],
            enableScroll: false,
            legend: {
                show: false
            },
            dataLabel: false,
            xAxis: {
                disableGrid: true,
            },
            yAxis: {
                gridType: "dash",
                dashLength: 2,
                data: [
                    {
                        min: Math.floor((arr[0] - props.splitNumber) / props.splitNumber) * props.splitNumber,
                        max: Math.ceil((arr[0] + props.splitNumber) / props.splitNumber) * props.splitNumber + props.splitNumber,
                        splitNumber: props.splitNumber,
                        formatter: (value) => Math.round(value)
                    }
                ]
            },
            extra: {
                area: {
                    type: "straight",
                    opacity: 1,
                    addLine: true,
                    width: 2,
                    gradient: true,
                },
                tooltip: {
                    showBox: true,
                    bgColor: "#66CEE6",
                    bgOpacity:1,
                    showArrow: false,
                    legendShow: false,
                    border: true,
                    borderWidth: 1,
                    borderColor: "#66CEE6",
                    borderRadius: 4,
                }
            }
        }
    }
    if (arr.length == 0) return
    // 多条数据时
    const realMin = Math.min(...arr)
    const realMax = Math.max(...arr)
    const splitNumber = props.splitNumber
    let min = Math.floor((realMin - splitNumber) / splitNumber) * splitNumber
    let max = Math.ceil((realMax + splitNumber) / splitNumber) * splitNumber
    // 保证max比realMax多一个splitNumber的倍数，并且(max-min)能被splitNumber整除
    while (max <= realMax) {
        max += splitNumber
    }
    while ((max - min) % splitNumber !== 0) {
        max += splitNumber
    }
    return {
        color: ["#6DDACE"],
        padding: [15, 15, 0, 15],
        enableScroll: false,
        legend: {
            show: false
        },
        dataLabel: false,
        dataPointShape: false,
        xAxis: {
            disableGrid: true,
            categories: categories,
            formatter: (value, index, series, opts) => {
                if (index == 0) {
                    return `${value}`
                } else if (index == series.categories.length - 2) {
                    return `${value}`
                }
                return ''
            }
        },
        yAxis: {
            gridType: "dash",
            dashLength: 2,
            data: [
                {
                    min: min,
                    max: max,
                    splitNumber: splitNumber,
                    formatter: (value) => Math.round(value)
                }
            ]
        },
        extra: {
            area: {
                type: "straight",
                opacity: 1,
                addLine: true,
                width: 2,
                gradient: true,
            },
            tooltip: {
                showBox: true,
                bgColor: "#66CEE6",
                bgOpacity: 1,
                showArrow: false,
                legendShow: false,
                border: true,
                borderWidth: 1,
                borderColor: "#66CEE6",
                borderRadius: 4,
            }
        }
    }
})

</script>

<style scoped>
.chart-panel {
    width: 100%;
}

.chart-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 16rpx;
}

.chart-panel-content .chart-panel-empty {
    width: 100%;
    height: 100%;
}
</style>